.navigation{
    width: 100%;
    height: 55px;
    background-color: #222328;
    line-height: 55px;
    /* position: fixed;
    top: 0;
    z-index: 9999; */
    min-width: 1280px;
}

.navigation .logo
{
    float: left;
    height: 51px;
    margin-top: 4px;
}

.navigation-u{
    height: 55px;
    float: right;
    margin: 0;
}

.navigation-u li{
    float: left;
    position: relative;
}

.navigation-u a{
    font-size: 14px;
    color: #fff;
    display: block;
    padding: 0 20px;
    height: 55px;
}

.navigation-u i{
    font-size: 10px;
    margin-left: 5px;
}

.navigation-u a:hover{
    background-color: rgb(255, 255, 255);
    color: #222328;
}

.navigation-u li:hover{
    background-color: rgba(255, 255, 255, 0.301);
}

.menus{
    display: none;
    width: 120px;
    background-color: rgba(255, 255, 255, 0.973);
    /* 设置绝对定位，使其不占据页面的位置 */
    position: absolute;
    top: 55px;
    left: 0;
    z-index: 999;
    box-shadow: 0 5px 8px rgba(0, 0, 0, .4);
}

.menus a{
    color: #000;
    font-size: 14px; 
    height: 45px;
    display: block;
    line-height: 45px;
}


.navigation-u li:hover .menus{
    display: block;
}


.menus a:hover{
    color: rgb(255, 255, 255);
    background-color: #222328;
}


.fixation-logo,
.fixation-wx{
    width: 70px;
    height: 65px;
    text-align: center;
    line-height: 65px;
}

.fixation{
    position: fixed;
    top: 350px;
    right: 0;
    z-index: 9999;
}

.fixation-logo{
    background-color: #222328;
}

.fixation-wx{
    background-color: rgb(255, 238, 0);
}

.fixation-logo img{
    width: 65%;
    margin-top: 8px;
}

.fixation-wx i{
    font-size: 40px;
    color: #131416;
}

.pop-up-wx{
    width: 0px;
    height: 120px;
    position: absolute;
    top: 5px;
    right: 85px;
    overflow: hidden;
    transition: width 0.2s;
}

.pop-up-wx img{
    width: 100%;
}

.fixation:hover .pop-up-wx{
    width: 120px;
}

.contact{
    position: relative;
    margin-right: 20px;
}
.navigation .contact i{
    float: right;
    font-size: 24px;
    color: #fff;
}

.fgx{
    width: 1.5px;
    height: 11px;
    background-color: #fff;
    margin-top: 22px;
    margin-right: 20px;
}

.add{
    margin-left: 290px;
    margin-right: 20px;
}

.weixin{
    width: 120px;
    height: 0px;
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 55px;
    right: -10px;
    overflow: hidden;
    transition: height .3s;
    box-shadow:  0 2px 5px rgba(0, 0, 0, 0.233);
    z-index: 80;
}

.weixin img{
    width: 80%;
    margin: 11px 11px;
}

.contact:hover .weixin{
    height: 120px;
}

.banner{
    width: 1280px;
    margin: 0 auto;
    margin-top: 15px;
}

.banner img{
    max-width: 100%;
    border-radius: 10px;
}

.shuffling-w{
    width: 100%;
    background-color: #f4f4f4;
    margin-top: 50px;
    padding-bottom: 50px;
}

.woeks,
.shuffling{
    position: relative;
}

.woeks-yw,
.shuffling-yw{
    margin-top: 80px;
}

.woeks-yw .hen,
.shuffling-yw .hen{
    height: 5px;
    width: 180px;
    background-color: #000;
    margin: 65px 0 49px;
}

.woeks-yw h2,
.shuffling-yw h2{
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
}

.woeks-yw p,
.shuffling-yw p{
    font-size: 16px;
}

#outer {
    width: 1280px;
    height: 475px;
    margin: 50px auto;
    /* padding: 5px 0; */
    background-color: azure;
    position: relative;
    overflow: hidden;
}

#imgList {
    list-style: none;
    position: absolute;
}

#imgList li {
    float: left;
}

/* .Shuffling-figure-q{
    width: 1280px;
    height: 475px;
    margin: 30px auto;
    overflow: hidden;
}

.Shuffling-figure-q img{
    width: 100%;
} */

.Shuffling-figure-o h3{
    font-size: 22px;
    color: #000;
    margin-bottom: 10px;
}

.Shuffling-figure-o p{
    font-size: 16px;
    color: #222328;
}

.main{
    width: 631px;
    height: 404px;
    position: absolute;
    top: 65px;
    right: 0px;
}

.main img{
    width: 100%;
}

.details .details-z{
    float: left;
}

.details .details-y{
    float: right;
}

.details-o{
    margin-top: 20px;
    position: relative;
}

.details-q{
    width: 660px;
    height: 349px;
    background-color: rgb(255, 255, 255);
    transition: .2s;
}

.details-qy{
    width: 600px;
    height: 718px;
    background-color: rgb(255, 255, 255);
    transition: .2s;
}

.details-ht{
    width: 1280px;
    height: 298px;
    background-color: rgb(255, 255, 255);
    transition: .2s;
}

.kuan{
    height: 68px;
    padding: 0 15px;
    background-color: rgba(0, 0, 0, 0.616);
    position: absolute;
    bottom: 0px;
    right: 0px;
    text-align: right;
}

.details-o h3{
    font-size: 18px;
    color: #fff;
    margin-top: 8px;
}

.details-o p{
    color: rgb(255, 255, 255);
    font-size: 12px;
    margin-top: 5px;
}

.details-q img{
    width: 100%;
    height: 100%;
}

.details-qy img{
    width: 100%;
    height: 100%;
}

.details-ht img{
    width: 100%;
    height: 100%;
}

.details-q:hover,
.details-qy:hover{
    transform:scale(1.04);
    box-shadow: 0 0 12px rgba(0, 0, 0, .2)
}

.More{
    width: 220px;
    height: 50px;
    border: #000 1px solid;
    border-radius: 50px;
    text-align: center;
    margin: 0px auto;
    margin-top: 50px;
}

.More h2{
    line-height: 50px;
    font-size: 18px;
}

.More:hover{
    background-color: #000;
    color: #fff;
}

.andmore a{
    float: left;
}

.andmore-z{
    margin-right: 20px;
}

.andmore-o{
    margin-top: 20px;
    position: relative;
}

.andmore-q{
    width: 413px;
    height: 260px;
    background-color: rgb(255, 255, 255);
    transition: .2s;
}

.andmore-q img{
    width: 100%;
    height: 100%;
}

.andmore h3{
    color: #000;
    font-size: 20px;
    margin-top: 10px;
}

.andmore p{
    color: rgb(85, 85, 85);
    margin-top: 5px;
}

.note{
    padding: 5px 15px;
    background-color: rgba(0, 0, 0, 0.61);
    position: absolute;
    bottom: 62px;
    right: 0px;
}

.note i{
    /* color: rgb(85, 85, 85); */
    color: rgb(218, 167, 0);
    font-size: 16px;
    vertical-align: bottom;
}

.note .note-p{
    display: inline-block;
    color: #FFF;
    font-size: 14px;
}

.andmore-q:hover{
    transform:scale(1.04);
    box-shadow: 0 0 12px rgba(0, 0, 0, .2)
}

.Thank-w{
    background-color: #f4f4f4;
    margin-top: 50px;
    min-width: 1280px;
}
.Thank{
    position: relative;
    padding: 20px 0;
}

.Thank-bj{
    position: absolute;
    top: 60px;
    right: 0px;
}

.Thank-bj img{
    width: 80%;
}

.Thank-t{
    position: relative;
}

.Thank-t img{
    width: 50%;
}

.Thank h2,.Long-arrow{
    font-size: 28px;
    margin: 15px 15px;
}

.Long-arrow img{
    width: 10%;
}

.db{
    width: 100%;
    height: 90px;
    background-color: rgb(51, 51, 51);
}

.db-h{
    margin: 0 auto;
    width: 1280px;
}
.db-u li{
    float: left;
    margin-top: 35px;
    margin-right: 70px;
    color: rgb(116, 116, 116);
    font-size: 15px;
}

.db-u a{
    color: rgb(190, 190, 190);
    font-size: 14px;
}

.db-u a:hover{
  color: rgb(165, 165, 165);
}

.icon{
    position: relative;
    float: right;
}

.icon i{
    color: rgb(190, 190, 190);
    font-size: 22px;
    line-height: 90px;
    margin: 0 15px;
}

.icon-q{
    right: 35px;
}

.icon-w{
    left: 30px;
}

.icon-q,
.icon-w{
    width: 100px;
    height: 100px;
    position: absolute;
    top: -90px;
    background-color: #000;
    display: none;
}

.icon-q::after,
.icon-w::after{
    content: '';
    border: transparent 8px solid;
    border-bottom: none;
    border-top-color: rgb(250, 250, 250);
    width: 0;
    height: 0;
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    margin:auto;
    z-index: 63;
}

.icon-q img,
.icon-w img{
    width: 100%;
}

.icon a:hover .icon-q,
.icon a:hover .icon-w{
    display: block;
}

.icon a:hover .qq-d{
    color: rgb(82,148,208);
}

.icon a:hover .weixin-d{
    color: rgb(36,164,45);
}